<!--
Copyright 2008 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Author: Carl Nygaard
-->
<html>
<head>
  <title>Google</title>
  <link rel=stylesheet href='stereo.css' type='text/css' />
  <!-- This key is specific to http://code.google.com/p/earth-api-samples/ -->
  <!--<script src="http://www.google.com/jsapi?key=ABQIAAAAVqIP_JQh0O0nvjijuZBcURRUcK71kK3x8BpRQf8Mb40e-Kd2yBQnaUrjjec_JDVdtyMSQNFa1_Sf2A"></script>-->
  <!-- This key is specific to http://earth-api-samples.googlecode.com/ -->
  <script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
  <script type="text/javascript">

// Log a message to firebug, if it exists.
log = function(msg) {
  if (typeof console != "undefined") {
    console.log(msg);
  }
}
google.load("earth", "1");
google.load("maps", "2");

var ge1 = null;
var ge2 = null;
var geocoder;
var timeAtStartup;

function el(e) { return document.getElementById(e); }

function init() {
  geocoder = new google.maps.ClientGeocoder();
  init3D();
}

function initCB1(object) {
  ge1 = object;
  ge1.getWindow().setVisibility(true);
  showVersions(ge1);
  google.earth.addEventListener(ge1.getView(), "viewchange", updateView1);
  google.earth.addEventListener(ge1.getWindow(), "mousedown", function (e) { 
      masterge = 1;});
}

function initCB2(object) {
  var elapsedStartupTime = (new Date()).getTime() - timeAtStartup;
  // Arbitrarily declare the startup time done after loading second instance.
  el('startup_time').innerHTML = 'Startup time: ' +
    (elapsedStartupTime/1000) + 's';
  ge2 = object;
  ge2.getWindow().setVisibility(true);
  google.earth.addEventListener(ge2.getView(), "viewchange", updateView2);
  google.earth.addEventListener(ge2.getWindow(), "mousedown", function (e) {
      masterge = 2;});
  setTimeout(function() { ready_for_updates = true; }, 3000);
}

function failureCB(object) {
  log('Load failed.');
}

function init3D() {
  timeAtStartup = (new Date()).getTime();
  google.earth.createInstance("map3d", initCB1, failureCB);
  google.earth.createInstance("map3d2", initCB2, failureCB);
}

function showVersions(ge) {
  var pluginVersion = ge.getPluginVersion();
  var earthVersion = ge.getEarthVersion();

  var html;
  var color;
  if (pluginVersion != earthVersion) {
    color = "#FF0000";
    html = "Plugin v.: " + pluginVersion + " != Earth v.:" + earthVersion;
  } else {
    color = "#A0A0A0";
    html = "Version: " + pluginVersion;
  }
  var div = el('version_info');
  div.style.color = color;
  div.innerHTML = html;
}

function submitLocation() {
  var address = el('address').value;
  geocoder.getLatLng(address, function(point) {
    if (point) {
      warp(point.y, point.x, 99.99,
           ge1.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 4000);
    }
  });
}

var UPDATE_INTERVAL = 10; // ms
var DEFAULT_HEADING_OFFSET = 2.5; // degrees
var ready_for_updates = false;

// Will be 1 or 2 depending on which instance the user's mousedown happens to be
// interacting with.
var masterge = 1;

updateView1 = function() {
  if (masterge == 1) {
    updateView(ge1, ge2);
  }
}

updateView2 = function() {
  if (masterge == 2) {
    updateView(ge2, ge1);
  }
}

updateView = function (master, slave) {
  // Don't try to update the other instance every frame end -- give it some
  // leeway with a short pause between updates.
  if (!ready_for_updates) {
    return;
  }
  ready_for_updates = false;
  setTimeout(function() { ready_for_updates = true; }, UPDATE_INTERVAL);
  var la = master.getView().copyAsLookAt(master.ALTITUDE_RELATIVE_TO_GROUND);
  if (slave != null) {
    slave.getOptions().setFlyToSpeed(slave.SPEED_TELEPORT);
    var lookAtNew = slave.createLookAt('');
    // Try to grab the user preference for angle.  If none is available, use the
    // default value.
    offset = parseFloat(el('angle').value);
    if (isNaN(offset)) {
      offset = DEFAULT_HEADING_OFFSET;
    }
    lookAtNew.set(la.getLatitude(), la.getLongitude(), 
                  la.getAltitude(), la.getAltitudeMode(),
                  ((la.getHeading() + offset) % 360.0),
                  la.getTilt(), la.getRange());
    slave.getView().setAbstractView(lookAtNew);
  }
}

warp = function(lat, lon, alt, alm, hea, til, ran) {
    masterge = 1;
    ge1.getOptions().setFlyToSpeed(0.3);
    lookAtNew = ge1.createLookAt('');
    lookAtNew.set(lat, lon, alt, alm, hea, til, ran);
    ge1.getView().setAbstractView(lookAtNew);
}

// Used to generate nice string for use in creating the warp method.
logWarpArgs = function () {
  log(la.getLatitude() + ', ' +
      la.getLongitude() + ', ' +
      la.getAltitude() + ', ' +
      la.getAltitudeMode() +', ' +
      la.getHeading() + ', ' +
      la.getTilt() + ', ' +
      la.getRange());
}


warpStHelens = function () {
  warp(46.201931042248425, -122.18768009582334, 0, 1, -133.37508659385836,
       74.77545103409945, 2473.825162713587);
}

toggleBuildings = function (ge) {
  var layers = ge.getLayerRoot();
  var buildings = layers.getLayerById(ge.LAYER_BUILDINGS);
  var vis = buildings.getVisibility();
  ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, !vis);
}

adjustTableSize = function() {
  width = parseInt(el('tablewidth').value);
  height = parseInt(el('tableheight').value);
  if (isNaN(width) || isNaN(height)) {
    log('Unable to parse table width.');
  }
  el('stereotable').setAttribute('width', width);
  el('td1').setAttribute('width', width / 2);
  el('td2').setAttribute('width', width / 2);
  el('stereotable').setAttribute('height', height);
  el('td1').setAttribute('height', height);
  el('td2').setAttribute('height', height);
}

  </script>
</head>
<body style='background-color: black' onload='init()' onunload='google.maps.Unload()' id='body'>
  <font color="white">
  <div>
    <h4> Cross your eyes and view the earth in <a style="color: white"
        href="http://www.google.com/url?sa=D&q=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FStereoscope">stereoscopic 3D!</a></h4>
  </div>

  <div>
    <form style='background-color: black' name='searchform' id='searchform' action='javascript:submitLocation();void(0);'>
      <input type=text size=60 id='address'></input>
      <input type=submit value='Go to location'>
    </form>
  </div>
  <div>
    Options:
    <input type=button value="Toggle Buildings" onclick="toggleBuildings(ge1);
    toggleBuildings(ge2);">
    Stereoscopic Angle: <input type=text value="2.5" size=4 onChange='updateView(ge1,ge2);' name="angle" id="angle">
    Frame Width (clunky in FF): <input type=text value="800" size=4 name="tablewidth"
    id="tablewidth">
    Height: <input type=text value="500" size=4 name="tableheight"
    id="tableheight">
    <input type=button value="Apply" onclick="adjustTableSize();updateView(ge1,ge2);">
    <br>
    Presets:
    <input type=button value="Mt. St. Helens" onclick="warpStHelens();">
    <input type=button value="Olympic Mountains" onclick="warp(47.781836645843356, -123.29926210022279, 0, 1, 87.26724861674506, 66.66368113077611, 2243.630920354237);">
    <input type=button value="Mt. Rainier" onclick="warp(46.87849008354237, -121.82008643917123, 0, 1, 107.84212885422953, 60.69956234606824, 4015.3145429445153);">
    <input type=button value="Golf Course" onclick="warp(47.20583343736742, -122.57549815232201, 0, 1, -84.8360904281972, 75.73767531616677, 73.39929967072935);">
    <input type=button value="Seattle (use buildings!)" onclick="warp(47.606497154329944, -122.33160853709278, 0, 1,-35.53224087776965,  73.43771383361043, 584.5287052359812);">
  </div>

  <div style='font-size: 10pt; color: #A0A0A0'>
    <span id='version_info'>
      &lt;version info&gt;
    </span>

    <span id='startup_time' style='margin-left: 40px'>
      &lt;startup time&gt;
    </span>
  </div>

  <div>
    <center>
    <table name='stereotable' id='stereotable' border=0 style='color: black;' height=500 width=800>
      <tr>
        <td name='td1' id='td1' height=500 width=400>
          <div id='map3d' style='border: 1px solid silver; height: 100%'></div>
        </td>
        <td name='td2' id='td2' height=500 width=400>
          <div id='map3d2' style='border: 1px solid silver; height: 100%'></div>
        </td>
      </tr>
    </table>
    <h5> Be careful not to strain your eyes!</h5>
    </center>
  </div>
</body>
</html>
